<template>
	<view class="content">
    <nav-bar
			title="添加银行卡"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>

         <view v-if="tapPage">
              <view class="max-ipt-pape">
                <view class="item">
                    <text class="title">持卡人</text>
                    <input type="text" class="ipt" maxlength="50" placeholder="请输入持卡人姓名" />
                </view>
                <view class="item">
                    <text class="title">卡号</text>
                    <input type="text" class="ipt" maxlength="50" placeholder="请输入卡号" />
                    <image class="scan" src="/static/addCard/scan.png"></image>
                </view>
              </view>
              <view class="max-ipt-pape">
                <view class="item">
                    <text class="title">银行</text>
                    <text class="tip">请选择银行</text>
                    <iconArrow :point="1" :color="'#888'" />
                </view>
              </view>
              <view class="btnNext" @click="btnNext">
                <view>下一步</view>
                <apple-sliver></apple-sliver>
              </view>
          </view>

           <view v-if="!tapPage">
              <view class="max-ipt-pape">
                <view class="item">
                    <text class="title">身份证号</text>
                    <input type="text" class="ipt" maxlength="50" placeholder="请输入身份证号" />
                </view>
                <view class="item">
                    <text class="title">手机号</text>
                    <input type="text" class="ipt" maxlength="50" placeholder="请输入手机号" />
                </view>
                <view class="item">
                    <text class="title">验证码</text>
                    <input type="text" class="ipt" maxlength="50" placeholder="请输入验证码 " />
                    <view class="code">获取验证码</view>
                </view>
              </view>
              <view class="max-ipt-pape">
                <view class="item">
                    <text class="title">有效期 </text>
                    <!-- <text class="tip">请选择银行</text> -->
                </view>
              </view>
              <view class="btnNext" @click="btnSave">
                <view>下一步</view>
                <apple-sliver></apple-sliver>
              </view>
          </view>
	</view>
</template>

<script>
import iconArrow from '../components/icon-arrow';
import NavBar from "../../components/nav-bar";

export default {
  components: {
    iconArrow,
    NavBar,
  },
		data() {
			return {
        noList:false,
        tapPage:true
      }
		},    
		onLoad() 
		{
		},
		watch:{
    },
		methods: {
      btnNext(){
        this.tapPage=false;
      },
      btnSave(){
        this.tapPage=true;
        this.$api.goPage('/pages/user/complete');
      }
		}
	}
</script>

<style  lang="scss" scoped>
	.content {
		 -webkit-overflow-scrolling: touch;
		 background-color: #f5f5f5;
     position: relative;
     padding-bottom: px2vw(30);
     height: 100vh;
  }
  .max-ipt-pape{
    background-color: #fff;
    margin:px2vw(10) auto;
    .item{
      height: px2vw(60);
      width: px2vw(350);
      margin:0 auto;
      border-bottom: px2vw(1) solid #f4f4f4;
      position: relative;
      .ipt,
      .tip,
      .title{
        position: absolute;
        top: 0;
        height: px2vw(60);
        line-height: px2vw(60);
        left: 0;
        color: #333;
        font-size:px2vw($fz16);
      }
      .ipt{
        left: px2vw(80);
      }
      .tip{
        left: auto;
        right: px2vw(35);
        color: #888;
      }
      .scan {
        width: 49rpx;
        height: 44rpx;
        position: absolute;
        right: 0;
        top: 31%;
      }
      .code{
        height: px2vw(30);
        width: px2vw(90);
        line-height: px2vw(30);
        text-align: center;
        font-size: px2vw($fz14);
        border:px2vw(1) solid #F24244;
        color: #F24244;
        position: absolute;
        top: 50%;
        margin-top: - px2vw(15);
        right: px2vw(0);
        border-radius: px2vw(5);
      }
    }

  }
    .btnNext{
      text-align: center;
      font-size: px2vw($fz16);
      color: #fff;
      background-color: #F24244;
      position: fixed;
      width: 100vw;
      bottom: 0;
      view {
        height: px2vw(60);
        line-height: px2vw(60);
      }
    }
</style>
